<template>
  <!-- 表格 前面是时间 到后面是新闻板块 -->
  <div class="component component--module more-headlines condensed">
    <header class="header header--primary" v-if="props.titleTime.title">
      <h2 class="title">
        <router-link to="" class="link">{{
          props.titleTime.title
        }}</router-link>
      </h2>
      <p class="paragraph">{{ props.titleTime.name }}</p>
    </header>

    <div class="column column--primary jw">
      <div class="collection__elements j-scrollElement">
        <!-- 开始 -->
        <div class="element element--article BarronsOnline" v-for="(item, index) in props.timeNewsData" :key="index">
          <!-- 开始2 -->
          <div :class="[{ ar_active: showIndex === index }, 'article__content']">
            <h3 class="article__headline" @click="tabclick(item)">
              {{item.title }}
              <!-- <router-link :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }" class="link">{{
                item.title }}</router-link> -->
            </h3>

            <div :class="[
              { ar_active: showIndex === index },
              'content--secondary',
            ]" v-if="props.timeNewsData !== 0 && item.company">
              <div class="group group--tickers">
                <bg-quote :class="[item.data < 0 ? 'negative' : 'positive']">
                  <div class="ticker" @click="tabclick(item)"
                    @mouseover="showTooltip(index)" @mouseout="hideTooltip">
                    <span class="ticker__symbol">{{ item.company }}</span>
                    <!--class negative postive正负数判断颜色 -->
                    <bg-quote :class="[item.data < 0 ? 'negative' : 'positive']">{{ item.ticketChange }}</bg-quote>
                    <i v-if="item.company !== null" class="icon"></i>
                </div>
                  <!-- <hoverEffect :hoverData="hoverData" v-if="index === showIndex"></hoverEffect> -->
                </bg-quote>
              </div>
            </div>
            <div class="article__details">
              <span class="article__timestamp">{{
                formateDate(item.createTime)
              }}</span>
            </div>
          </div>
          <!-- 结束2 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import hoverEffect from "../../../components/hoverEffect/hoverEffect.vue";
import { usemkDataArrays } from "../../../api/market";
// 时间转换
import { formateDate } from "@/utils/timeHandle";
const { hoverData } = usemkDataArrays();
const props = defineProps(["timeNewsData", "titleTime"]);
onMounted(() => {
  props.timeNewsData.forEach((item) => {
    if (item.ticketChange && item.ticketChange !== null) {
      item.data = parseFloat(item.ticketChange) / 100;
    }
  });
})
const showIndex = ref(-1);

const showTooltip = (index) => {
  showIndex.value = index;
};
const hideTooltip = () => {
  showIndex.value = -1;
};
import { useRouter } from "vue-router";
const router = useRouter();
function tabclick(item) {
  console.log(item)
  if(item.uuid !== ""){
    router.push({ name: 'NewDetail', params: { uuid: item.uuid, author: item.author }})
  }
}
</script>

<style scoped lang="scss">
.element--article .group--tickers {
  overflow: inherit;
}

.jw {
  .ar_active {
    z-index: 10;
  }
}
</style>
